<template>
  <el-container class="bg-white rounded" :style="{ height: (h + 'px') }">
    <el-header class="image-header">
      <div style="margin-left: 10px">
        <el-button type="primary" size="default" icon="plus" @click="handleOpenCreate">新增分类</el-button>
        <el-button type="warning" size="default" icon="upload" @click="handleOpenUploadImg">上传图片</el-button>
        <el-button type="success" size="default" icon="upload" @click="handleOpenUploadVideo">上传视频</el-button>
         <span class="ml15">共文件：54848个</span>
         <span class="ml15">容量：2545G</span>
      </div>

      <div>
        <el-button type="primary" v-if="showSelectBtn" size="default" icon="select" @click="handleSureSubmit">确定选择</el-button>
      </div>
    </el-header>
    <el-container>
      <ImageAside ref="ImageAsideRef" @handleAsideChange="handleAsideChange"/>
      <ImageMain ref="ImageMainRef" :type="type"   @select="handleSelect"/>
    </el-container>
    <kva-upload-dialog ref="imgUploadDialogRef" @success="handleUploadImgSuccess"></kva-upload-dialog>

  </el-container>
</template>
<script setup>
import ImageAside from "@/components/resource/ImageAside.vue"
import ImageMain from "@/components/resource/ImageMain.vue"
const props = defineProps({
  height:{
    type:Number,
    default:0
  },
  type:{
    type:String,
    default:"checkbox"
  }
})
const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight - 90 - props.height
const ImageAsideRef = ref({})
const ImageMainRef = ref({})
const handleOpenCreate = ()=>ImageAsideRef.value.handleCreate()
const handleAsideChange = (image_class_id,keyword)=>{
  ImageMainRef.value.changeType(image_class_id,keyword)
}
const handleOpenUploadImg = ()=>{
  imgUploadDialogRef.value.handleOpen()
}
const handleOpenUploadVideo = ()=>{
}
const showSelectBtn = ref(false)
const selectFile = ref({})
const imgUploadDialogRef = ref({});
const emits = defineEmits(["select"])
// 选择文件返回
const handleSelect = (file)=>{
  showSelectBtn.value = true
  selectFile.value = file
}
const handleUploadImgSuccess = async (resp)=>{
  ImageMainRef.value.handleCurrentChange(1)
  // base64
  imgUploadDialogRef.value.handleClose()
}
const handleUploadVideoSuccess = (resp)=>{
  ImageMainRef.value.handleCurrentChange(1)
}
//确认提交
const handleSureSubmit = ()=>{
  emits("select",selectFile.value)
}

</script>
<style>
.bg-white{background: #fff;margin: 2px}
.image-header{
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  padding:0!important;
  justify-content: space-between;
}
.el-dialog__body{
  padding-top: 0!important;
}
</style>